import React, { memo, useEffect } from 'react'

import { SettleSingerWrapper } from './style'
import HYThemeHeaderSmall from '@/components/theme-header-small';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { getSettleSinglers } from '../../store/actionCreators';

import { getSizeImage } from '@/utils/format-utils'

export default memo(function HYSettleSinger () {
  const dispatch = useDispatch();

  const { settleSinglers } = useSelector(state => ({
    settleSinglers: state.getIn(['recommend', 'settleSinglers'])
  }), shallowEqual)

  useEffect(() => {
    dispatch(getSettleSinglers())
  }, [dispatch])

  return (
    <SettleSingerWrapper>
      <HYThemeHeaderSmall title="入驻歌手" more="查看全部" />
      <div className="singler-list">
        {
          settleSinglers.map((item, index) => {
            return (
              <a href="/singlers" key={item.id} className="item">
                <img src={getSizeImage(item.img1v1Url, 62)} alt="" />
                <div className="info">
                  <div className="title">{item.alias.join(" ") || item.name}</div>
                  <div className="name">{item.name}</div>
                </div>
              </a>
            )
          })
        }
      </div>
      <div className="apply-for">
        <a href="/abc">申请成为网易音乐人</a>
      </div>
    </SettleSingerWrapper>
  )
})
